import React, { PureComponent } from 'react';
import {
  Icon,
  Upload,
  message,
} from 'antd';
import {connect} from 'dva';
import QiniuUploader from '../../utils/qiniu';
import G from '../../utils/g';

const uploadButton = (
  <div>
    <Icon type="plus" />
    <div className="ant-upload-text">Upload</div>
  </div>
);

@connect(state => ({
  addGoods: state.addGoods,
}))
export default class Uploader extends PureComponent {
  state = {
    fileList : this.props.fileList || [
      // {
      // uid: -1,
      // name: 'xxx.png',
      // status: 'done',
      // url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      // }
    ]
  };

  componentWillReceiveProps = (props)=>{
    //console.log(props);
    // if(props.clear){  //是否清空
    //   this.setState({
    //     fileList : []
    //   });
    // }

    if(props.fileList && props.fileList.length > 0 && this.state.fileList.length == 0){
      this.setState({
        fileList : props.fileList
      });
    }
  };

  beforeUpload = (file, fileLists)=>{
    const { onChange  } = this.props;
    let fileList = [...this.state.fileList];
    const formData = new FormData();
    fileLists.forEach(v=>{
      formData.append('files', v);
    });
    const {dispatch} = this.props;
    dispatch({
      type: 'addGoods/upload',
      payload: formData
    }).then(res=>{
      if(res){
        fileList = [
          ...fileList,
          ...res.map(url=>({
            uid: G.uuid(16),
            name: file.name,
            status: 'done',
            url: url,
          })),
        ];
        this.setState({
          fileList,
        });
        typeof onChange == 'function' && onChange(fileList);
      }else{
        message.error('上传失败');
      }
    });
    // let uploadPromise = function(fileItem){
    //   return new Promise((resolve, reject)=>{
    //     QiniuUploader({
    //       file : fileItem ,
    //       uptoken,
    //       success : (url)=>{
    //         resolve({
    //           uid: G.uuid(16),
    //           name: file.name,
    //           status: 'done',
    //           url: url,
    //         });
    //
    //       },
    //       error : (err)=>{
    //         reject(err);
    //       }
    //     });
    //   });
    // };
    // let uploadArr = fileLists.map(v=>{
    //   return uploadPromise(v);
    // });
    //
    // Promise.all(uploadArr).then(result=>{
    //   result.forEach(v=>{
    //     fileList.push(v);
    //   });
    //   this.setState({
    //     fileList
    //   });
    //   typeof onChange == 'function' && onChange(fileList);
    //   //console.log(result);
    // }).catch(err=>{
    //   console.log(err);
    // });

    return false;
  };

  handleUploadChange = ({fileList})=> {
    this.setState({fileList});
    this.props.onChange(fileList);
  };

  render(){
    const { fileList } = this.state;
    const length = this.props.length || 1;
    return <Upload
      multiple = {true}
      name="avatar"
      accept="image/*"
      listType="picture-card"
      className="avatar-uploader"
      fileList={fileList}
      showUploadList={true}
      action="/"
      beforeUpload={this.beforeUpload}
      onChange={this.handleUploadChange}
    >
      {fileList.length >= length ? null : uploadButton}
    </Upload>
  }
}
